<template>
	<view class="content">
		<view class="address-box">
			<view class="one-point" v-for="(item,index) in pointsList" :key='index'>
				<view class="point-infor">
					<view class="point-logo"></view>
					<input type="text" :id='index' @input="changeInput" v-model="item.addressName" placeholder-style="color:#9E9E9E"
						placeholder='请输入途经点'>
				</view>
				<u-icon @click="delThis(index)" name="close" color="#040404" size="24"></u-icon>
			</view>
			<view class="end-point">
				<view class="point-logo"></view>
				<view class="end-address">{{endAddress.addressName}}</view>
			</view>
		</view>
		<view class="operate-btn">
			<view class="btn add-btn" @click="addPoints">
				<u-icon name="plus" color="#ffffff" size="30"></u-icon>
				<view>添加途经点</view>
			</view>
			<view class="btn" @click="saveThis">完成</view>
		</view>
		<view class="choose-points" v-if="list.length>0">
			<view class="one-address" v-for="(item,index) in list" @click="chooseThis(item)" :key='index'>
				<view class="address-title">
					<image src='../../static/image/addrss.png' mode=""></image>
					<view class="name">
						{{item.name}}
					</view>
					<view class="distance">{{item.distance}}</view>
				</view>
				<view class="location">{{item.address}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		selectAddress,
		getDistances
	} from '../../request/api.js'
	export default {
		data() {
			return {
				list: [],
				chooseNum:''
			};
		},
		computed: {
			endAddress() {
				return this.$store.state.address.endAddress
			},
			pointsList() {
				return this.$store.state.address.wayPoints
			},
			startAddress(){
				return this.$store.state.address.startAddress
			}
		},
		methods: {
			// 删除途经点
			delThis(e){
				this.pointsList.splice(e,1)
			},
			// 保存途经点
			saveThis(){
				this.$store.commit("address/CHANGE_WAYPOINTS",this.pointsList);
				uni.navigateBack()
			},
			// 添加途经点
			addPoints() {
				this.pointsList.push({
					addressName: "",
					lat: '',
					lng: ''
				})
			},
			changeInput(e) {
				clearInterval(this.timer)
				if (!e.detail.value) {
					this.list = [];
					return
				}
				this.timer = setInterval(() => {
					clearInterval(this.timer)
					this.chooseNum=e.target.id;
					this.getList(e.detail.value)
				}, 500)
			},
			chooseThis(e){
				this.pointsList[this.chooseNum]={
					addressName: e.name,
					address:e.address,
					lat: e.latitude,
					lng: e.longitude
				}
				this.$forceUpdate();
			},
			async getList(value) {
				var _this = this;
				let res = await selectAddress({
					query: value,
					radius: 20000,
					location: this.startAddress.latitude + ',' + this.startAddress.longitude
				});
				this.list = res.results; // 储存搜索结果数组
				console.log(this.list);
				this.list = this.list.map((item) => {
					let {
						lat,
						lng
					} = item.geometry.location;
					return {
						name: item.name,
						address: item.formatted_address.slice(0, item.formatted_address.lastIndexOf("邮")),
						latitude: lat,
						longitude: lng,
						distance: getDistances(this.startAddress.latitude, this.startAddress.longitude, lat,
							lng)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;

		.content {
			width: 702rpx;
			margin-left: auto;
			box-sizing: border-box;
			margin-right: auto;
			padding-top: 24rpx;

			.address-box {
				width: 100%;
				background-color: #ffffff;
				border-radius: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 2rpx 12rpx 0 rgba(204, 204, 204, 0.3);
				padding: 24rpx;

				.one-point {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 24rpx;

					.point-infor {
						width: 610rpx;
						height: 100rpx;
						background-color: #F5F5F5;
						border-radius: 15rpx;
						display: flex;
						align-items: center;
						padding:0 24rpx;
						box-sizing: border-box;

						.point-logo {
							width: 16rpx;
							height: 16rpx;
							background-color: #D71B0A;
							border-radius: 50%;
						}

						input {
							font-size: 30rpx;
							margin-left: 24rpx;
							flex:1;
						}
					}
				}

				.end-point {
					width: 610rpx;
					height: 100rpx;
					background-color: #F5F5F5;
					border-radius: 15rpx;
					display: flex;
					align-items: center;
					padding-left: 24rpx;
					box-sizing: border-box;

					.point-logo {
						width: 16rpx;
						height: 16rpx;
						background-color: #FC9A03;
						border-radius: 50%;
					}

					.end-address {
						font-size: 30rpx;
						margin-left: 24rpx;
						color: #040404;
					}
				}
			}

			.operate-btn {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					width: 280rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 100rpx;
					font-size: 36rpx;
					color: #ffffff;
					background-color: #040404;
				}

				.add-btn {
					width: 398rpx;
					background-color: #D71B0A;

					view {
						margin-left: 10rpx;
					}
				}
			}

			.choose-points {
				background-color: #ffffff;
				box-shadow: 0 2rpx 12rpx 0 rgba(204, 204, 204, 0.3);
				border-radius: 20rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				padding: 0 24rpx;

				.one-address {
					height: 132rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					border-bottom: 1px solid #F0F0F0;

					.address-title {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 100%;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.name {
							font-size: 30rpx;
							color: #040404;
							box-sizing: border-box;
							line-height: 42rpx;
							flex: 1;
							padding: 0 20rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							-o-text-overflow: ellipsis;
						}

						.distance {
							font-size: 24rpx;
							line-height: 33rpx;
						}
					}

					.location {
						font-size: 26rpx;
						color: #9E9E9E;
						line-height: 37rpx;
						margin-top: 5rpx;
						padding-left: 60rpx;
						width: 100%;
						box-sizing: border-box;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>